import React, { PureComponent } from 'react';
import { connect } from 'dva';
import "./index.less"
import "../../Common.less"
class Drag extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
        }
        this.dragenter=this.dragenter.bind(this)
        this.drag=this.drag.bind(this)
        this.drop=this.drop.bind(this)
        this.dragover=this.dragover.bind(this)
        this.dragend=this.dragend.bind(this)
    }
    componentDidMount(){

    }
    dragenter(e){
       
        // console.log("dragenter",e)
        if(!e.target.classList.contains("borderRed")){
            e.target.classList.add("borderRed")
        }
        
            return true;
    }
    drag(e){
       
        // console.log("drag",e)
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text",e.target.dataset.item);
        return true
    }
    drop(e){
       
        console.log("drop",e)
        var data=e.dataTransfer.getData("text");
        console.log("drop",data)
        return false;
    }
    dragend(e){
       
        e.dataTransfer.clearData("text");
        return false
    }
    dragleave(e){
       
        if(e.target.classList.contains("borderRed")){
            e.target.classList.remove("borderRed")
        }
          
            return true
        // console.log("dragleave",e)
    }
    dragover(e){
       
        e.dataTransfer.effectAllowed = "move";
        e.preventDefault();
        return true;
        
    }
    render(){
        return (
            <div className="flexBox">
                <div draggable data-item={"{index:1}"} onDragStart={this.drag} onDragEnd={this.dragend} onDragLeave={this.dragleave} onDrop={this.drop} onDragOver={this.dragover} onDragEnter ={this.dragenter} className="card">1</div>
                <div draggable data-item={"{index:1}"} onDragStart={this.drag} onDragEnd={this.dragend} onDragLeave={this.dragleave} onDrop={this.drop} onDragOver={this.dragover} onDragEnter={this.dragenter} className="card">2</div>
                <div draggable data-item={"{index:1}"} onDragStart={this.drag} onDragEnd={this.dragend} onDragLeave={this.dragleave} onDrop={this.drop} onDragOver={this.dragover} onDragEnter={this.dragenter} className="card">3</div>
                <div draggable data-item={"{index:1}"} onDragStart={this.drag} onDragEnd={this.dragend} onDragLeave={this.dragleave} onDrop={this.drop} onDragOver={this.dragover} onDragEnter={this.dragenter} className="card">4</div>
            </div>
        )
    }
}
export default connect(
    ({
        
    }) => {
        
    },
    dispatch => ({
    })
)(Drag)